<template>
    <div class="allbuju">
        <waimaiorderTop/>

        <div class="content">
            <!-- 第一层 -->
            <div class="first">
                <div class="dianpu_name">
                    <h8><strong>莱蒙茶！！</strong></h8>
                    <p><strong>5.0</strong>&nbsp;&nbsp;月售1613&nbsp;&nbsp;食无忧<br>公告:来喝，来品，来尝，快来带走你的柠檬茶~&nbsp;</p>
                </div>
                <div class="frist_tu">
                    <img id="tu1" src="../../../assets/waimai/naicha1.jpg">
                </div>
            </div>

            <!-- 第二层 -->
            <div class="second">
                <div class="second_name">
                    <span>点餐</span>
                    <span>评价</span>
                    <span>商家</span>
                    <div class="second_n"></div>
                </div>
                <div class="second_tu">
                    <img id="tu2" src="../../../assets/waimai/guanzhuwo.jpg">
                </div>
            </div>

            <!-- 第三层 -->
            <div class="third">
                <!-- 左侧 -->
                <div class="third_one">
                    <div class="div1 active"><p>推荐</p></div>
                    <div class="div1"><p>主打</p></div>
                    <div class="div1"><p>柠檬茶</p></div>
                    <div class="div1"><p>果鲜茶</p></div>
                    <div class="div1"><p>加料区</p></div>
                </div>

                <!-- 右侧 -->
                <div class="third_two">
                    <div class="dian1 diandian">
                        <div class="yinping">
                            <div class="third_tu3">
                                <img id="tu3" src="../../../assets/waimai/drink1.jpg">
                            </div>
                            <div class="wenzi">
                                <div class="wenzi1">
                                    <p><strong>白桃乌龙柠檬茶</strong></p>
                                </div>
                                <div class="wenzi2">
                                    <span class="spanspan">约700毫升</span><span>&nbsp;&nbsp;</span>
                                    <span class="spanspan">茶水</span><span>&nbsp;&nbsp;</span>
                                    <span class="spanspan">高维C</span>
                                </div>
                            </div>
                        </div>
                        <div class="jiaqian">
                            <div class="jia1">
                                <p>￥14.88</p>
                            </div>
                            <div class="jia2"><span id="xuan">选规格</span></div>
                        </div>
                    </div>
                    <div class="dian1 diandian">
                        <div class="yinping">
                            <div class="third_tu3">
                                <img id="tu3" src="../../../assets/waimai/drink2.jpg">
                            </div>
                            <div class="wenzi">
                                <div class="wenzi1">
                                    <p><strong>沙冰柠檬茶</strong></p>
                                </div>
                                <div class="wenzi2">
                                    <span class="spanspan">约700毫升</span><span>&nbsp;&nbsp;</span>
                                    <span class="spanspan">茶水</span><span>&nbsp;&nbsp;</span>
                                    <span class="spanspan">高维C</span>
                                </div>
                            </div>
                        </div>
                        <div class="jiaqian">
                            <div class="jia1">
                                <p>￥14.88</p>
                            </div>
                            <div class="jia2"><span id="xuan">选规格</span></div>
                        </div>
                    </div>

                    <div class="dian1 diandian">
                        <div class="yinping">
                            <div class="third_tu3">
                                <img id="tu3" src="../../../assets/waimai/drink3.jpg">
                            </div>
                            <div class="wenzi">
                                <div class="wenzi1">
                                    <p><strong>白月光(喝前摇一摇)</strong></p>
                                </div>
                                <div class="wenzi2">
                                    <span class="spanspan">约700毫升</span><span>&nbsp;&nbsp;</span>
                                    <span class="spanspan">茶水</span><span>&nbsp;&nbsp;</span>
                                    <span class="spanspan">高维C</span>
                                </div>
                            </div>
                        </div>
                        <div class="jiaqian">
                            <div class="jia1">
                                <p>￥14.88</p>
                            </div>
                            <div class="jia2"><span id="xuan">选规格</span></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <waimaiorderFooter/>

    </div>
</template>

<script >
import waimaiorderTop from '@/components/jiajv/waimai/waimai_order_top.vue'
import waimaiorderFooter from '@/components/jiajv/waimai/waimai_footer.vue'
export default {
  name: 'waimai',
  components: {
    waimaiorderTop,
    waimaiorderFooter,
  },
}
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 722px;
    padding-top: 10px;
    background-color:  rgb(237, 244, 237);
}
// 第一层
.first{
    width: 90%;
    height: 115px;
    margin: auto;
    border: 1px solid;
    border-radius: 15px;
    background-color: rgb(234, 247, 234);
}
.frist_tu{
    width: 100px;
    height: 90px;
    float: right;
    margin: 10px 0px;
    // background-color: rgb(195, 126, 126);
}
#tu1{
    width: 75px;
    height: 65px;
    margin: 0px 10px;
}
.dianpu_name{
    padding: 1px 10px 10px 20px;
    width: 210px;
    height: 105px;
    float: left;
    // background-color: #fff;
}
// 第二层
.second{
    width: 100%;
    height: 165px;
    padding-top: 20px;
    // background-color: rgb(180, 114, 114);
}
.second_name{
    width: 90%;
    height: 40px;
    display: flex;    
    margin: auto;  
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fff;
    justify-content: space-between;
    align-items:center;
}
span{
    font-size: 20px;
}
.second_n{
    width: 80px;
    height: 30px;
    border: 1px solid;
    border-radius: 10px;
    border-color: rgb(45, 45, 224);
}
.second_tu{
    // margin: auto;
}
#tu2{
    width: 90%;
    height: 100px;
    margin-top: 10px;
    margin-left: 18px;
    border-radius: 10px;
}
// 第三层
.third{
    width: 100%;
    height: 410px;
    padding-top: 10px;
    // background-color: rgb(228, 229, 228);
}
.active{
    background-color: #fff;
}
.div1{
    // border: 1px solid;
    width: 100%;
    height: 60px;
    // text-align: center;
}
.third_one{
    width: 20%;
    height: 410px;
    float: left;
    text-align: center;
    line-height: 50px;
    // background-color: rgb(233, 19, 19);
}
.third_two{
    width: 80%;
    height: 410px;
    float: right;
    background-color: #fff;
}
.diandian{
    width: 90%;
    height: 110px;
    margin-left: 30px;
    margin: 10px;
    // border: 1px solid;
    background-color: rgb(246, 252, 246);
    float: left;
}
#tu3{
    margin-left: 10px;
    width: 110px;
    height: 80px;
    float: left;
}
.wenzi{
    width: 150px;
    height: 40px;
    float: right;
    // background-color: rgb(151, 85, 85);
    margin-left: 10px;
}
.spanspan{
    width: 20px;
    height: 10px;
    background-color: #cac2c2;
    font-size: 10px;
}
.jiaqian{
    width: 158px;
    height: 30px;
    margin-left: 120px;
    // background-color: rgb(172, 64, 64);
}
.jia1{
    width: 70px;
    height: 20px;
    margin-top: 25px;
    // border: 1px solid;
    float: left;
    // background-color: rgb(136, 87, 87);
}
#xuan{
    font-size: 15px;
}
.jia2{
    width: 55px;
    height: 22px;
    float: left;
    padding-left: 5px;
    margin-left: 90px;
    border-radius: 10px;
    border: 1px solid;
    background-color:rgb(73, 174, 241);
    border-color: rgb(121, 121, 232);
}
</style>